.home-page {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  position: relative;
  
  // 顶部导航栏样式
  .nav-bar {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 100;
  }
  
  // 主内容区域
  .home-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    padding-bottom: 80px; // 增加底部内边距，防止内容被TabBar遮挡
    
    // 搜索框容器
    .search-container {
      background-color: #fff;
      border-radius: 8px;
      padding: 12px;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      
      .search-icon {
        color: #999;
        margin-right: 8px;
      }
      
      .search-text {
        color: #999;
        font-size: 14px;
      }
    }
    
    // 名医馆部分
    .famous-hospital-section {
      margin-bottom: 16px;
      
      .section-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 12px;
        color: #333;
      }
    }
    
    // 功能菜单
    .function-menu {
      display: flex;
      justify-content: space-between;
      background-color: #fff;
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 16px;
      
      .menu-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 22%;
        
        .icon {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-bottom: 8px;
          background-position: center;
          background-size: 60%;
          background-repeat: no-repeat;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
          font-size: 20px;
        }
        
        .hospital-icon {
          background-color: #1890ff;
        }
        
        .department-icon {
          background-color: #52c41a;
        }
        
        .doctor-icon {
          background-color: #fa8c16;
        }
        
        .appointment-icon {
          background-color: #f5222d;
        }
        
        .text {
          font-size: 12px;
          color: #333;
        }
      }
    }
    
    // 章节标题
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 16px 0 12px;
      
      .title {
        font-size: 16px;
        font-weight: bold;
        color: #333;
      }
      
      .more {
        font-size: 12px;
        color: #999;
        display: flex;
        align-items: center;
      }
    }
    
    // 科室网格 - 优化样式
    .department-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-bottom: 20px;
      
      .department-item {
        background-color: #fff;
        border-radius: 12px;
        padding: 12px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
        transition: transform 0.2s ease;
        
        &:active {
          transform: scale(0.98);
        }
        
        .department-icon {
          width: 48px;
          height: 48px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 8px;
          font-size: 28px;
          filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.1));
        }
        
        .department-name {
          font-size: 12px;
          color: #333;
          font-weight: 500;
        }
      }
    }
    
    // 健康直通车
    .health-express {
      display: flex;
      justify-content: space-between;
      position: relative;
      padding: 0 8px;
      
      .health-item {
        background-color: #fff;
        border-radius: 8px;
        width: 48%;
        height: 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        
        .health-icon {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          margin-bottom: 8px;
          background-position: center;
          background-size: 60%;
          background-repeat: no-repeat;
        }
        
        .heart-icon {
          background-color: #f5222d;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z'/%3E%3C/svg%3E");
        }
        
        .neuro-icon {
          background-color: #722ed1;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M1.333 2.667C1.333 1.194 2.55 0 4 0h8c1.45 0 2.667 1.194 2.667 2.667v.666c.523 0 .927.477.927 1 0 .522-.404 1-.927 1v.666C14.667 6.56 13.45 7.33 12 7.33H4c-1.45 0-2.667-.77-2.667-2.33V4c-.523 0-.927-.478-.927-1 0-.523.404-1 .927-1v-.667zM12 7.333v-.666c.523 0 .927-.477.927-1 0-.523-.404-1-.927-1V4c0-.665-.305-1.333-.667-1.333H4c-.362 0-.667.668-.667 1.333v.667c-.523 0-.927.477-.927 1 0 .522.404 1 .927 1v.666c0 .665.305 1.334.667 1.334h8c.362 0 .667-.669.667-1.334z'/%3E%3C/svg%3E");
        }
        
        .text {
          font-size: 14px;
          color: #333;
        }
      }
      
      .scroll-indicator {
        position: absolute;
        bottom: -20px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        
        .left-arrow, .right-arrow {
          color: #999;
          font-size: 12px;
        }
        
        .indicator-bar {
          width: 60px;
          height: 4px;
          background-color: #ddd;
          border-radius: 2px;
          margin: 0 8px;
          position: relative;
          
          .active-bar {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 30%;
            background-color: #999;
            border-radius: 2px;
          }
        }
      }
    }
    
    // 附近医院
    .nearby-hospitals {
      margin-top: 16px;
      
      .hospital-card {
        background-color: #fff;
        border-radius: 8px;
        padding: 12px;
        display: flex;
        margin-bottom: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
        
        .hospital-logo {
          width: 70px;
          height: 70px;
          background-color: #f5f5f5;
          border-radius: 4px;
          margin-right: 12px;
          overflow: hidden;
          
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        
        .hospital-info {
          flex: 1;
          
          .hospital-name {
            font-size: 16px;
            font-weight: 500;
            color: #333;
            margin-bottom: 4px;
          }
          
          .hospital-tags {
            display: flex;
            margin-bottom: 4px;
            flex-wrap: wrap;
            
            .tag {
              font-size: 10px;
              color: #1890ff;
              background-color: rgba(24, 144, 255, 0.1);
              padding: 2px 6px;
              border-radius: 4px;
              margin-right: 6px;
              margin-bottom: 4px;
            }
          }
          
          .hospital-type {
            font-size: 12px;
            color: #666;
            margin-bottom: 4px;
          }
          
          .hospital-distance {
            font-size: 12px;
            color: #999;
            display: flex;
            align-items: center;
            
            .location-icon {
              font-size: 12px;
              margin-right: 4px;
            }
          }
        }
        
        .booking-btn {
          background-color: #1890ff;
          color: #fff;
          border: none;
          padding: 4px 12px;
          border-radius: 4px;
          font-size: 12px;
          align-self: flex-end;
          cursor: pointer;
          
          &:active {
            background-color: #096dd9;
          }
        }
      }
    }
  }
  
  // 底部导航栏
  .tab-bar-container {
    position: sticky;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    border-top: 1px solid #eee;
    z-index: 100;
  }
}

// 添加底部导航的样式
:global {
  .appointment-icon {
    width: 22px;
    height: 22px;
    background-color: #1677ff;
    border-radius: 50%;
    position: relative;
    
    &::before {
      content: '';
      position: absolute;
      width: 10px;
      height: 10px;
      border: 2px solid #fff;
      border-radius: 50%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  
  .adm-tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid #f0f0f0;
    background-color: #fff;
    --adm-color-primary: #1677ff;
  }
}

// 搜索框样式
.search-box {
  background-color: #f5f5f5;
  border-radius: 16px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  margin: 12px 16px;
  
  .search-icon {
    color: #999;
    margin-right: 8px;
  }
  
  .search-placeholder {
    color: #999;
    font-size: 14px;
  }
} 